<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <style>
        .clearfix:after{
            display:table;
            content:"";
            clear:both;
        }
        #footer{
            width:100%;
            height:1.5rem;
            background:red;
            position:fixed;
            bottom:0px;
        }
        #header{
            width:100%;
            height:1rem;
            background:red;
            position:fixed;
            top:0px;
            color:white;
        }
        #footer>div{
            float:left;
            width:20%;
            height:1.5rem;
            line-height:1.5rem;
            text-align:center;
            color:white;
        }
        .leftbtn{
            position:absolute;
            left:10px;
            top:0px;
            height:1rem;
            line-height:1rem;
        }
        .rightbtn{
            position:absolute;
            right:10px;
            top:0px;
            height:1rem;
            line-height:1rem;
        }
        .title{
            height:1rem;
            line-height:1rem;
            text-align:center;
        }
        body{
            padding-top:1.1rem;
            padding-bottom:1.6rem;
        }
        #content{
            width:96%;
            margin:0 auto;
        }
        img{
            vertical-align: middle;
            border:none;
            width:100%;
        }
        video{
            margin-top:0.1rem;
        }
    </style>
</head>
<body>

<div id="header" class="clearfix">
    <div class="leftbtn">登录</div>
    <div class="title">图片</div>
    <div class="rightbtn">注册</div>
</div>


<div class="content" id="content">
    <div>
        <img
                onclick="javascript:location='10.html'"
                src="http://wimg.spriteapp.cn/x/640x400/ugc/2018/01/29/5a6ec904395fa_1.jpg" class="j-imglazyload" data-url="http://wimg.spriteapp.cn/x/640x400/ugc/2018/01/29/5a6ec904395fa_1.jpg" alt="被网友加了几条...">
    </div>
    <div>
        <img src="http://wimg.spriteapp.cn/x/640x400/ugc/2018/01/29/5a6ea04f30831_1.jpg" class="j-imglazyload" data-url="http://wimg.spriteapp.cn/x/640x400/ugc/2018/01/29/5a6ea04f30831_1.jpg" alt="我认认真真的脑...">
    </div>
    <div>
        <img src="http://wimg.spriteapp.cn/ugc/2018/01/29/5a6f0f0ec9353_1.jpg" class="j-imglazyload" data-url="http://wimg.spriteapp.cn/ugc/2018/01/29/5a6f0f0ec9353_1.jpg" alt="年度最不走心雪...">
    </div>
</div>


<div id="footer" class="clearfix">
    <div onclick="javascript:location='8.html'">视频</div>
    <div onclick="javascript:location='9.html'">图片</div>
    <div>新闻</div>
    <div>音乐</div>
    <div>广播</div>
</div>


</body>
</html>